<template>
  <div class="container">
   <el-dialog  :title="btnadd==0?'添加':'修改'"
    :visible.sync="dialogVisible"  
 
    >
   <el-form
       :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
       label-width="100px"
      class="demo-ruleForm">
         <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="人员编号" prop="Personnelnumbers">
             <el-input v-model.number="ruleForm.Personnelnumbers"></el-input>
        </el-form-item> -->
         <el-form-item label="所属角色" prop="power">
           <el-select  placeholder="请选择所属角色"  v-model="ruleForm.power">
                <el-option label="请选择" value=""></el-option>
                <el-option label="管理员" :value="0"></el-option>
                <el-option label="街道负责人" :value="1"></el-option>
                
              </el-select>
            
        </el-form-item>
        <el-form-item label="说明" prop="type">
          <el-select  placeholder="请选择说明"  v-model="ruleForm.type">
                <el-option label="请选择" value=""></el-option>
                <el-option label="该账号拥有所有权限" :value="0"></el-option>
                <el-option label="上传车位信息" :value="1"></el-option>
                
              </el-select>
            
        </el-form-item>
         <el-form-item label="是否有效" prop="effect" >
              <el-select  placeholder="请选择是否有效" v-model="ruleForm.effect">
                <el-option label="请选择" value=""></el-option>
                <el-option label="是" :value="0"></el-option>
                <el-option label="否" :value="1"></el-option>
                
              </el-select>
        </el-form-item>
        
    </el-form>  

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogfun">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >提 交</el-button
      >
    </span>
</el-dialog>

<!-- Form -->

      </div>

</template>

<script>
import {getaddcmtApi,getcmtApi,geteditcmtApi} from "@/api/cmthomeApi"
export default {
props:["row","btnadd"],
data() {
  
      return {
        gridData: [],
        dialogVisible:true,
        dialogTableVisible:false,
       ruleForm: {
          id:"",
          name: '',
          
         effect: '',
         power: '',
        
          type: "",
         },
         rules: {
        //rules对应上面属性的验证规则
       name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },  //blur失去焦点开始触发
          //前面是条件，不满足条件就会提示message ，trigger是什么时候执行
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

          //自定义验证规则
        //   { validator: validateMyname, trigger: "blur" },
        ],
        // Personnelnumbers:[
        //      { required: true, message: '请输入人员编号', trigger: 'blur' },
        //   ],
       effect:[
             { required: true, message: '请选择是否有效', trigger: 'change' },
          ],
        power:[
             { required: true, message: '请选择所属角色', trigger: 'change' },
          ],
         type :[
             { required: true, message: '请选择说明', trigger: 'change' },
          ],
          
      },
        
      };
    },
    methods:{
      submitForm(formName){
       this.$refs[formName].validate((vaild) => {
         
         if(vaild){
           
          
             if(this.btnadd == 0){
                getaddcmtApi(this.ruleForm).then(res=>{
            this.dialogTableVisible=false
            this.$emit("resetHome")
            this.$emit('parentclosedialog')

        })
             }else{
                  geteditcmtApi(this.ruleForm).then(res=>{
            this.dialogTableVisible=false
            this.$emit("resetHome")
            this.$emit('parentclosedialog')

        })
                 
             }
         }else{
           alert("你是傻子");
          return false;
         }
         
       })
        
      },
      closeDialogfun() {
      this.$emit("parentclosedialog");
    },
      
    },
    mounted(){
      
      this.ruleForm=JSON.parse(JSON.stringify(this.row))
      console.log(this.ruleForm);
      
    },
  created(){
    getcmtApi().then(res=>{
          console.log(res);
        })
  }
}
</script>

<style lang="less" scoped>
.container{
background-color:#fff;
width:100% ;
margin-bottom: 10px;
 
 }
 

</style>

